/* 使用所有变量 */
@import './base.scss';
@import './theme.scss';
@import './variables.scss';
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: url("@/assets/images/bgc_1.png"); 
  background-attachment: fixed;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app{
  height: 10000px;
}


@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    /* background-color: #ffffff; */
  }

  a:hover {
    color: #747bff;
  }

  button {
    background-color: #f9f9f9;
  }
}

@media screen and (max-width: 480px) {

  /* 针对小型手机的样式 */
  #app {
    max-width: 480px;
    /* background-color: #aaa; */
  }
}

@media screen and (min-width: 481px) and (max-width: 767px) {

  /* 针对中型手机的样式 */
  #app {
    max-width: 767px;
    min-width: 481px;
    /* background-color: #bbb; */
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

  /* 针对小型平板的样式 */
  #app {
    max-width: 1024px;
    min-width: 768px;
    /* background-color: #ccc; */
  }
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {

  /* 针对大型平板的样式 */
  #app {
    max-width: 1280px;
    min-width: 1025px;
    /* background-color: #ddd; */
  }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {

  /* 针对小型桌面的样式 */
  #app {
    max-width: 1440px;
    min-width: 1281px;
    /* background-color: #eee; */
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {

  /* 针对中型桌面的样式 */
  #app {
    max-width: 1920px;
    min-width: 1441px;
    /* background-color: #fff; */
  }
}

@media screen and (min-width: 1921px) {

  /* 针对大型桌面的样式 */
  #app {
    min-width: 1921px;
    /* background-color: #000; */
  }
}
